<template>
  <div id="rankingListView">
    <a-table
      :columns="columns"
      :data="dataList"
      :pagination="false"
      :column-resizable="true"
    >
      <template #user="{ record, rowIndex }">
        <a-space>
          <div>
            {{ rowIndex }}
          </div>
          <div>
            <a-avatar>
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              />
            </a-avatar>
          </div>
          <div>
            <div>
              {{ record.userName }}
            </div>
            <div>
              <i>
                已完成题数
                <b> {{ JSON.parse(record.completedQuestion).length }}</b
                >题
              </i>
            </div>
          </div>
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { UserControllerService } from "../../../generated";
import { onMounted, ref } from "vue";
import message from "@arco-design/web-vue/es/message";

const dataList = ref([]);
const loadData = async () => {
  const res = await UserControllerService.getTopUsersUsingGet(10);
  console.log(res.data);
  if (res.code === 0) {
    dataList.value = res.data?.reverse();
  } else {
    message.error("加载失败，" + res.message);
  }
};
/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});
const columns = [
  {
    title: "排行榜",
    slotName: "user",
    align: "center",
  },
];
</script>

<style scoped>
#rankingListView {
  max-width: 640px;
  margin: 0 auto;
}
</style>
